<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册界面</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="login">
        <div class="login-form">
            <h2>注册界面</h2>
            <form>
                <div class="item">
                    <input type="text" name="username" placeholder="登录账号" />
                </div>
                <div class="item">
                    <input type="text" name="password" placeholder="首字大写，英文字母与数字组，至少8位" />
                </div>
                <div class="btn">
                    <input id="register" type="button" value="注册" />
                    <input id="back" type="button" value="返回" />
                </div>
            </form>
        </div>
    </div>

    <script>
        // 非空验证
        const userNameInputEle = document.querySelector('input[name="username"]')
        const passwordInputEle = document.querySelector('input[name="password"]')
        const registerBtnEle = document.querySelector('#register')

        // 账号非空验证
        const checkUserName = function () {
            // 判断有无P节点，有则移除
            if (userNameInputEle.nextElementSibling && userNameInputEle.nextElementSibling.nodeName == 'P') {
                userNameInputEle.nextElementSibling.remove() // 移除P节点
            }

            let username = userNameInputEle.value // 获取账号
            // 非空判断
            if (username == '') {
                // 添加P节点
                let pEle = document.createElement('p')
                pEle.innerHTML = '账号不能为空'
                pEle.style.color = 'red'
                pEle.style.fontSize = '14px'
                userNameInputEle.parentElement.appendChild(pEle)
                return false
            }

            return true
        }
        // 密码非空验证
        const checkPassword = function () {
            // 判断有无P节点，有则移除
            if (passwordInputEle.nextElementSibling && passwordInputEle.nextElementSibling.nodeName == 'P') {
                passwordInputEle.nextElementSibling.remove() // 移除P节点
            }

            let password = passwordInputEle.value // 获取账号
            // 非空判断
            if (password == '') {
                // 添加P节点
                let pEle = document.createElement('p')
                pEle.innerHTML = '密码不能为空'
                pEle.style.color = 'red'
                pEle.style.fontSize = '14px'
                passwordInputEle.parentElement.appendChild(pEle)
                return false
            }
            return true
        }
        // 账号非空验证
        userNameInputEle.addEventListener('blur', function () {
            checkUserName()
        })

        // 密码非空验证
        passwordInputEle.addEventListener('blur', function () {
            checkPassword()
        })

        // 注册验证

        registerBtnEle.addEventListener('click', function () {
            // 账号非空验证判断
            if (checkUserName() == false) {
                return
            }
            // 密码非空验证
            if (checkPassword() == false) {
                return
            }
            var username = userNameInputEle.value;
            console.log(username);
            let password = passwordInputEle.value // 密码
            console.log(password);
            //return
            let nick = 'nick';
            let reg = /^[A-Z][a-zA-Z0-9]{7,}$/
            if (reg.test(password) == false) {
                alert('密码格式：首字大写，英文字母与数字组，至少8位')
                return
            }
            //let username = userNameInputEle.value;
            // let createtime = '2021-07-05 10:38';
            // let headerimg = '/upload/fileHeader-1577955752106.jpg';

            let xmlHttp = new window.XMLHttpRequest();
            xmlHttp.open('POST', 'http://localhost:8089/api/register', true);
            //记得POST请求要设置请求头哈
            xmlHttp.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
            xmlHttp.send(
                `username=${username}&password=${password}`
                );
            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState == 4) {
                    if (xmlHttp.status == 200) {
                        let result = JSON.parse(xmlHttp.responseText);
                        if(result.resultCode == 1){
                            window.alert('注册成功');
                            window.location.href = './login.html';
                        }else{
                            window.alert('注册失败');
                        }
                    } else {

                    }
                }
            }
            // 登录成功,保存数据到localstorage, 
            //保存用户信息，用户名和密码
            // let user = {
            //     username: userNameInputEle.value,
            //     password: passwordInputEle.value
            // }

            // userList.push(user)
            // let userStr = JSON.stringify(userList)
            // let userList = []
            // let userStr = JSON.stringify(user)
            // localStorage.setItem('USER', userStr)

            // alert('注册成功!')
        })
        // 返回登陆界面
        const backBtnEle = document.querySelector('#back')
        backBtnEle.onclick = () => {
            location.href = './login.html'
        }
    </script>
</body>

</html>